<!--
 * @Author: your name
 * @Date: 2021-05-07 14:05:09
 * @LastEditTime: 2021-07-26 15:37:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\components\batchProcessing\steps\increasedWorkersSteps1.vue
-->
<template>
  <div class="steps_cnt">
    <slot name="official"></slot>
    <a-upload-dragger accept=".xlsx, .xls" :file-list="fileList" :remove="onRemoveFile" :action="get_OSS_config" :customRequest="onUpload" style="width: 520px; height: 192px">
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p class="ant-upload-hint">
        支持扩展名：.xls .xlsx
      </p>
    </a-upload-dragger>
  </div>
</template>

<script>
import { get_OSS_config } from '@/services/api';
import { upLoadAliyun } from '@/utils/util';
export default {
  name: 'increasedWorkersSteps1',
  props: ['resultModal'],
  data () {
    return {
      get_OSS_config: get_OSS_config,
      fileList: []
    };
  },
  watch: {
    resultModal: {
      handler (val) {
        if (!val) {
          this.fileList = []
        }
      }
    }
  },
  methods: {
    onUpload (info) {
      let fileType = info.file.name
      const type = fileType.substring(fileType.lastIndexOf('.'))

      if (/\.(xls|xlsx)$/.test(type)) {
        upLoadAliyun(info).then(res => {
          let url = res.filePath;
          if (res.filePath) {
            this.fileList = []
            this.fileList.push({ uid: '-3', name: fileType, status: 'done', url: res.filePath });
            this.$emit('fileUrl', url);
            this.$message.success('上传成功！')
          } else {
            this.$message.error('上传失败！')
          }
        });
      } else {
        this.$message.error('文件类型错误！')
        this.$refs.uploadDom.clearFiles()
      }
    },
    onRemoveFile () {
      this.$emit('remove-file')
      this.fileList = []
    }
  },
};
</script>

<style scoped lang="less">
/deep/ .ant-upload.ant-upload-drag {
  width: 520px;
  height: 192px;
  margin: 40px auto 0 auto;
}
.steps_cnt {
  margin-top: 40px;
  /deep/ .anticon.anticon-loading,
  /deep/ .ant-progress-outer {
    display: none;
  }
}
</style>
